
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <!--要获取行政区信息，先连接json信息-->
        <link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">
        <title>高德地图开发</title>
        <style>
            html,
            body,
            #container
            {
                width: 100%;
                height: 95%;
            }
            .mybox
            {
                width: 20rem;
            }
        </style>
    </head>

    <body>
        <div id = "container"> </div>

        <div class = "input-card" style = "width:20rem">
            <h4>彪哥地图的创建，销毁</h4>
            <div id = "btns">
                <div class = "input-item">
                    <button id = "create-btn" class = "btn" style="margin-right: 1rem">创建彪哥地图</button>
                    <button id = "destroy-btn" class = "btn">销毁彪哥地图</button>
                </div>
            </div>

            <div id = "lang">
                <div class = "input-item"><input id = "en" name = "language" type = "radio" ><span class = "input-text">英文地图</span></div>

                <div class = "input-item"><input id="zh_en" name = "language" type = "radio"><span class = "input-text">双语地图</span></div>

                <div class = "input-item"><input id = "zh_cn" name = "language" type = "radio" checked = "checked"><span class = "input-text">中文地图</span></div>

            </div> 

        </div>

        <div class = "info">
            <h4>获取地图级别与中心点坐标</h4>
            <p>当前级别：<span id = "map-zoom">17</span></p>
            <p>当前中心点：<span id = "map-center">112.884964,28.206887</span></p>
            <h4>当前行政区信息</h4>
            <p><span id = "map-city"></span></p>
        </div>

        <div class="mybox">
           <h4>设置地图中心点</h4>
            <div class="input-item">
             <button id="random-zoom-btn" class="btn">随机地图层级 setZoom</button>
           </div>
           <div class="input-item">
             <button id="random-center-btn" class="btn">随机地图中心点 setCenter</button>
           </div>
           <div class="input-item">
             <button id="random-zoomcenter-btn" class="btn">随机地图层级与中心点 setZoomAndCenter</button>
           </div> 
         </div>

        <script src="https://webapi.amap.com/maps?v=1.4.15&key=5ed4e9faab53f848f70b155242204142">
        </script>
        <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

        <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js" ></script>
        <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script>
        <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script>
        <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>

        <script>
            var map = null;

            function createMap()
            {
                map = new AMap.Map('container',{
                    resizeEnable:true,
                    zoom:17,
                    center:[112.884964,28.206887],
                    lang: "zh_cn"
                });

                log.success("创建彪哥地图");

                map.plugin(["AMap.ToolBar"], function(){
                    map.addControl(new AMap.ToolBar());
                });
            }
            
            function destroyMap()
            {
                map && map.destroy();
                log.info("彪哥地图已销毁");
            }

            //初始化地图
            createMap();

            map.on("complete", function(){
                log.success("彪哥的地图加载完成！");  
            });

            var radios = document.querySelectorAll("#lang input");
            radios.forEach(function(ratio){
                ratio.onclick = setLang;
            });

            function setLang(){
                map.setLang(this.id);
            }


            function logMapinfo(){
                var zoom = map.getZoom();
                var center = map.getCenter();
                document.querySelector("#map-zoom").innerText = zoom;
                document.querySelector("#map-center").innerText = center.toString();

                map.getCity(function(info){
                    var node = new PrettyJSON.view.Node({
                        el:document.querySelector("#map-city"),
                        data:info
                    });
                });
            };

            


            //绑定创建、销毁事件
            document.querySelector("#create-btn").onclick = createMap;
            document.querySelector("#destroy-btn").onclick = destroyMap;

            document.querySelector("#random-zoom-btn").onclick = function(){
                var zoom = Math.floor(Math.random()*7)+11;
                map.setZoom(zoom);
                log.info(`彪少已经把层级设为${zoom}级`);
            }

            document.querySelector("#random-center-btn").onclick = function(){
                var lng = 121.138398 + Math.floor(Math.random() * 589828) / 1e6; //经度范围[121.138398, 121.728226]
                var lat = 30.972688 + Math.floor(Math.random() * 514923) / 1e6; //纬度范围[30.972688, 31.487611]
                map.setCenter([lng, lat]); //设置地图中心点
                log.info(`彪少已经把中心点已设为 ${lng.toFixed(6)},${lat.toFixed(6)}`); 
            }

            document.querySelector("#random-zoomcenter-btn").onclick = function(){
                var zoom = Math.floor(Math.random()*7)+11;
                var lng = 121.138398 + Math.floor(Math.random() * 589828) / 1e6; //经度范围[121.138398, 121.728226]
                var lat = 30.972688 + Math.floor(Math.random() * 514923) / 1e6; //纬度范围[30.972688, 31.487611]
                map.setZoom(zoom);
                map.setCenter([lng, lat]); //设置地图中心点
                log.info(`彪少已经把层级设为${zoom}级,中心点已设为 ${lng.toFixed(6)},${lat.toFixed(6)}`);
            }

            logMapinfo();

            map.on('moveend',logMapinfo);
            map.on('zoomend',logMapinfo);

        </script>
    </body>
</html>
